<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="button"value='开始'id='but1'>
    <input type="button"value='停止'id='but2'>
    <input type="button"value='开始延时器'id='but3'>
    <input type="button"value='停止延时器'id='but4'>
</body>
<script>
    // 5. 计时器（定时器）
    // - 定时器
    //     - 开启：setInterval(参数1, 参数2)
    //         - 参数1：回调函数
    //         - 参数2：毫秒数，时间
    //         - 功能：每间隔参数2的时间，就执行一次参数1的回调函数
    //         - 返回值：当前定时器的唯一标志，用来清除自身定时器
    //     - 关闭：clearInterval(要清除的定时器的唯一标志)
    //         - 功能：关闭指定定时器
    // - 延时器
    //     - 开启：setTimeout(参数1, 参数2)
    //         - 参数1：回调函数
    //         - 参数2：毫秒数，时间
    //         - 功能：延迟参数2的时间，只执行一次参数1的回调函数
    //         - 返回值：当前延时器的唯一标志，用来清除自身定时器
    //     - 关闭：clearTimeout(要清除的延时器的唯一标志)
    //         - 功能：关闭指定延时器
    // - 注意：当前程序中不要保留没有意义的计时器
    //     - 建议：如果是在行为内开启计时器，在开启之前尽量先关闭
    var obut1 = document.getElementById('but1')
    var obut2 = document.getElementById('but2')
    var obut3 = document.getElementById('but3')
    var obut4 = document.getElementById('but4')
    var t;
    obut1.onclick=function(){
        clearInterval( t )
        t = setInterval(function(){
            console.log(123)
        },1000)
    }

    obut2.onclick = function(){
     clearInterval( t );
    }


    obut3.onclick=function(){
        clearInterval( t )
        t = setTimeout(function(){
            console.log(123)
        },3000)
    }

    obut4.onclick = function(){
     clearTimeout( t );
    }

   



    //  var t = setInterval(function(){
    //     console.log(123)
    // },1000)
    // clearInterval( t)
</script>
</html>